<template>
	<view>
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<div class="pledge-container">
			<!-- <h2 class="title">质押列表</h2> -->
			<!-- 质押项循环 -->
			<div v-for="(item, index) in pledgeList" :key="index" class="pledge-item">
				<!-- 图片置顶 -->
				<image class="image-header" :src="item.coverImg"></image>

				<!-- 内容区域 -->
				<div class="content">
					<div class="header">
						<div class="header-left">
							<view>最低质押{{item.minToken}} TX</view>
							<!-- <view class="stock">库存余量：{{ }}台</view> -->
						</div>
					</div>

					<div class="details">
						<div class="row">
							<text>{{item.title}}</text>
						</div>
						<div class="row">
							<text>单节点质押: 日产出 </text>
							<strong>{{ item.rewardRate }}%</strong>
						</div>
						<div class="row">
							<text>质押期限：</text>
							<span>{{ item.dayCount }}</span>
						</div>
						<button class="pledge-btn" @click="onopen(item)">立即质押</button>
					</div>
				</div>
			</div>
			<tui-drawer mode="bottom" :visible="assureDrawer" @close="closeAssure">
				<view class="ensure">
					<view @click="closeAssure" class="title1"><text class="iconfont icon-guanbi5"></text></view>
					<view class="en-title">质押TX资产不少于：<text>{{ minAmount }}</text></view>
					<input v-model="value" class="en-input" />
					<view class="en-btn" @click="onsubmit">确认质押</view>
				</view>
			</tui-drawer>
			<view style="width: 100%; height: 60rpx;" />
		</div>
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import {
		getPledgeList,
		joinPledge
	} from '@/api/new.js';
	import tuiDrawer from "@/components/tui-drawer/tui-drawer.vue";
	import pageFooter from "@/components/pageFooter/index.vue";
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		components: {
			tuiDrawer,
			pageFooter
		},
		data() {
			return {
				pledgeList: [],
				assureDrawer: false,
				value: 0,
				id: null,
        minAmount: 0,
        loading: false,
				statusBarHeight: statusBarHeight
			}
		},
		onLoad(options) {
			this.getList();
		},
		methods: {
			getList: function() {
				this.loading = true
				getPledgeList().then((res) => {
					console.log(res)
					this.pledgeList = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			closeAssure() {
				this.assureDrawer = false;
			},
			onopen(item) {
				this.assureDrawer = true
				this.id = item.id
        this.minAmount = item.minToken
			},
			onsubmit: function() {
        if(this.loading){
          return;
        }
				this.loading = true
				const obj = {
					amount: this.value,
					id: this.id
				}
				joinPledge(obj).then((res) => {
					if (res.code == 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.loading = false
            this.assureDrawer = false;
					}
				}).catch(err => {
					this.loading = false
				});
			}
		}
	}
</script>

<style scoped>
	.pledge-container {
		background-color: #fff;
		max-width: 600px;
		margin: 0px auto;
		padding: 0rpx 20rpx 20rpx 20rpx;
		font-family: Arial, sans-serif;
	}

	.title {
		color: #333;
		padding-bottom: 10px;
		border-bottom: 2px solid #eee;
	}

	.pledge-item {
		border: 1px solid #e4e4e4;
		border-radius: 8px;
		/* width: 94%; */
		margin: 15px 0;
		overflow: hidden;
	}

	.image-header {
		width: 100%;
		height: 200px;
		background: #ddd;
		border-bottom: 1px solid #e4e4e4;
	}

	.content {
		padding: 10px;
	}

	.header {
		margin-bottom: 15px;
	}

	.header-left {
		display: flex;
		margin: 0 0 5px 0;

		:nth-child(1) {
			flex: 1;
			color: #2c3e50;
			font-size: 18px;
			color: red;
		}
	}

	.stock {
		text-align: right;
		flex: 1;
		color: #333;
		font-size: 15px;
		line-height: 28px;
	}

	.details {
		/* border-top: 1px solid #eee; */
		/* padding-top: 15px; */
		position: relative;
	}

	.row {
		justify-content: space-between;
		margin: 10px 0;
		color: #666;
	}

	.pledge-btn {
		position: absolute;
		top: 26px;
		right: 0;
		width: 100px;
		padding: 5px;
		font-size: 14px;
		background: #333;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin-top: 15px;
	}

	.pledge-btn:hover {
		background: #66b1ff;
	}

	.ensure {
		width: 100%;
		height: 250px;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title1 {
			font-size: 32rpx;
			text-align: center;
			background-color: #fff;
			margin: 20rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.en-title {
			padding: 20px 20px 10px 20px;
			font-size: 16px;
			color: #333;

			text {
				color: antiquewhite;
			}
		}

		.en-input {
			width: 90%;
			margin-left: 20px;
			height: 76rpx;
			border: 2rpx solid #eee;
			border-radius: 5rpx;
			padding: 0 24rpx;
			font-size: 32rpx;
		}

		.en-btn {
			width: 80%;
			margin: 0 auto;
			height: 40px;
			margin-top: 25px;
			background-color: #333;
			border-radius: 20px;
			color: #fff;
			text-align: center;
			line-height: 40px;
		}

	}

	.ensure.on {
		transform: translate3d(0, 0, 0);
	}
</style>
